<!DOCTYPE html> 
<html> 
	<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport"
			content="user-scalable=no, width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="./css/frame/jquery.mobile-1.3.0.min.css">
		<link rel="stylesheet" href="./css/frame/ios_inspired/styles.css"
			rel="stylesheet" />

		<script type="text/javascript" charset="utf-8"
			src="./js/frame/iscroll.js"></script>
		<script type="text/javascript" charset="utf-8"
			src="./js/frame/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" charset="utf-8"
			src="./js/frame/jquery.mobile-1.3.0.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="./js/global.js"></script>
	
	
	<script>
		// all dialog buttons should close their parent dialog
		$(".ui-dialog button").live("click", function() {		
			$("[data-role='dialog']").dialog("close");		
		});
		$(document).on("mobileinit", function(){
		  $.mobile.defaultPageTransition = "slide";
		});
	</script>
	<style>
		#footerTabs {
			background: #FFF -webkit-radial-gradient(circle, #FFF, #dee2e4);
		}
		.ui-listview sup {
			font-size: 0.6em;
			color: #cc0000;
		}
	</style>

</head> 
<body> 
 
<div data-role="page"> 
 
	<div data-role="header" data-position="fixed"> 
		<h1>Page Header</h1>
	</div><!-- /header --> 
 
	<div data-role="content"> 
		<p>Welcome to the iOS-Inspired jQuery Mobile theme by <a href="http://twitter.com/taitems" target="_blank">@taitems</a>. Feel free to have a look around and report and bugs to the <a href="https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/issues" target="_blank">GitHub issues page</a>.</p> 
 
			
		<ul data-role="listview" data-inset="true"> 
			<li><a href="#headers">Header Bars</a></li> 
			<li><a href="#headerButtons">Header Buttons</a></li> 
			<li><a href="#footerTabs">Footer Tabs</a></li> 
			<li><a href="#formElements">Form Elements</a></li> 
			<li><a href="#listViews">List Views</a></li> 
			<li><a href="#dialogs">Dialogs</a></li> 
			<li><a href="#popups">Popups <sup>New!</sup></a></li> 
		</ul> 
					
		<br />
			
		<br />
 
		</div><!-- /ui-body wrapper -->	
</div><!-- /page --> 
  
<div data-role="page" id="formElements">
 
	<div data-role="header" data-position="fixed">
		<h1>Form Elements</h1>
		<a href="#" data-rel="back" data-theme="a">Back</a>
	</div><!-- /header --> 
 
	<div data-role="content"> 
		
		<div data-role="fieldcontain">
		
			<label>Some Fields and Inputs:</label>
			
			<br /><br />
	
			<input type="range" />
			
			<br /><br />
			
			<input type="search" />
			
			<br /><br />
			
			<input type="email" />
			
			<br />
		
		</div>
		
		<div data-role="fieldcontain">
			<label for="slider">Select slider:</label>
			<select name="slider" id="slider" data-role="slider">
				<option value="off">OFF</option>
				<option value="on">ON</option>
			</select> 
		</div>
		
		<div data-role="fieldcontain">
			<fieldset data-role="controlgroup" data-type="horizontal">
				<legend>Choose a pet:</legend>
					<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
					<label for="radio-choice-1">Cat</label>

					<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
					<label for="radio-choice-2">Dog</label>

					<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
					<label for="radio-choice-3">Hamster</label>
			</fieldset>
		</div>
		
		<a disabled="disabled" data-role="button" class="ui-btn-plain">Inactive &lt;a&gt;</a>

		<a data-role="button" class="ui-btn-plain">Active &lt;a&gt;</a>

		<button disabled="disabled" class="ui-btn-plain">Inactive &lt;button&gt;</button>

		<button class="ui-btn-plain">Active &lt;button&gt;</button>

		<p><small>Does the above look funny? Consider it a bug in jQuery mobile where the classes from the underling &lt;button&gt; are not being attached to the new DOM</small></p>
	
	</div>
	
</div>
  
<div data-role="page" id="listViews">
 
	<div data-role="header" data-position="fixed">
		<h1>List Example</h1>
		<a href="#" data-rel="back" data-theme="a">Back</a>
	</div><!-- /header --> 
 
	<div data-role="content"> 
		
		<ul data-role="listview"> 
			<li data-role="list-divider">Divider</li>
			<li><a href="#">Anatomy of a page</a></li> 
			<li><a href="#">Page transitions</a></li> 
			<li><a href="#">Dialogs</a></li> 
			<li><a href="#">Navigation: Ajax, hashes &amp; history</a></li> 
			<li><a href="#">Link format examples</a></li> 
			<li><a href="#">Theming pages</a></li>
			<li><a href="#">Anatomy of a page</a></li> 
			<li><a href="#">Page transitions</a></li> 
			<li><a href="#">Dialogs</a></li> 
			<li><a href="#">Navigation: Ajax, hashes &amp; history</a></li> 
			<li><a href="#">Link format examples</a></li> 
			<li><a href="#">Theming pages</a></li>
			<li><a href="#">Anatomy of a page</a></li> 
			<li><a href="#">Page transitions</a></li> 
			<li><a href="#">Dialogs</a></li> 
			<li><a href="#">Navigation: Ajax, hashes &amp; history</a></li> 
			<li><a href="#">Link format examples</a></li> 
			<li><a href="#">Theming pages</a></li>
			<li><a href="#">Anatomy of a page</a></li> 
			<li><a href="#">Page transitions</a></li> 
			<li><a href="#">Dialogs</a></li> 
			<li><a href="#">Navigation: Ajax, hashes &amp; history</a></li> 
			<li><a href="#">Link format examples</a></li> 
			<li><a href="#">Theming pages</a></li>
		</ul> 
		
	</div>
		
</div>
  
<div data-role="page" id="headers"> 
 
	<div data-role="header" data-position="fixed">
		<h1>Headers</h1>
		<a href="#" data-rel="back" data-theme="a">Back</a>
		</a>
	</div><!-- /header --> 
 
	<div data-role="content"> 
	
		<p>
			The default bar is the blue, but you can also use the black by specifying <em>data-theme="b"</em>.
		</p>
		
		<div data-role="header" data-position="inline">
			<a href="#" data-rel="back" data-theme="a">Back</a>
			<h1>Blue Bar</h1>
			<a href="#" data-theme="a">Button</a>
		</div>
		
		<br />
		
		<div data-role="header" data-theme="b" data-position="inline">
			<a href="#" data-rel="back" data-theme="b">Back</a>
			<h1>Black Bar</h1>
			<a href="#" data-theme="b">Button</a>
		</div>
	
	</div>
		
</div>
  
<div data-role="page" id="headerButtons"> 
 
	<div data-role="header" data-position="fixed">
		<h1>Header Buttons</h1>
		<a href="#" data-rel="back" data-theme="a">Back</a>
	</div><!-- /header --> 
 
	<div data-role="content"> 
	
		<p>
			The various styled buttons you can place in a header:
		</p>
		
		<div data-role="header" data-position="inline">
			<h1>Page Title</h1>
			<a href="#" data-theme="a">Edit</a>
		</div>
		
		<br />
		
		<div data-role="header" data-position="inline">
			<h1>Page Title</h1>
			<a href="#" data-theme="b">Black</a>
		</div>
		
		<br />
		
		<div data-role="header" data-position="inline">
			<h1>Page Title</h1>
			<a href="#" data-theme="c">Delete</a>
		</div>
		
		<br />
		
		<div data-role="header" data-position="inline">
			<h1>Page Title</h1>
			<a href="#" data-theme="d">Done</a>
		</div>
		
		<br />
		
		<div data-role="header" data-position="inline">
			<h1>Page Title</h1>
			<a href="#" data-rel="back" data-icon="arrow-l" data-theme="a">Back</a>
		</div>
		
		<br />
		
		<div data-role="header" data-theme="b" data-position="inline">
			<h1>Page Title</h1>
			<a href="#" data-rel="back" data-icon="arrow-l" data-theme="b">Back</a>
		</div>
	
	</div>
		
</div>

<div data-role="page" id="allDialogExample"> 
 
	<div data-role="content"> 
		<button data-theme="e">Button Style E</button>
		<button data-theme="d">Button Style D</button>
		<button data-theme="c">Button Style C</button>
		<button data-theme="b">Button Style B</button>
		<button data-theme="a">Button Style A</button>
	</div>
	
</div>

<div data-role="page" id="deleteDialogExample"> 
 
	<div data-role="content"> 
		<button data-theme="e">Delete Draft</button>
		<button data-theme="a">Save Draft</button>
		<button data-theme="b">Cancel</button>
	</div>
	
</div>

<div data-role="page" id="postDialogExample"> 
 
	<div data-role="content"> 
		<button data-theme="a">Post to Twitter</button>
		<button data-theme="a">Post to Facebook</button>
		<button data-theme="a">Post to YouTube</button>
		<button data-theme="b">Cancel</button>
	</div>
	
</div>
  
<div data-role="page" id="dialogs">
 
	<div data-role="header" data-position="fixed">
		<h1>Dialogs</h1>
		<a href="#" data-rel="back" data-theme="a">Back</a>
	</div><!-- /header --> 
 
	<div data-role="content"> 
	
		<a href="#allDialogExample" class="ui-btn-plain" data-role="button" data-rel="dialog" data-transition="slideup">All the options</a>
	
		<a href="#deleteDialogExample" class="ui-btn-plain" data-role="button" data-rel="dialog" data-transition="slideup">Delete Example</a>
	
		<a href="#postDialogExample" class="ui-btn-plain" data-role="button" data-rel="dialog" data-transition="slideup">Post Something</a>
	
	</div>
		
</div>
  
<div data-role="page" id="footerTabs" data-theme="b">
 
	<div data-role="header" data-position="fixed">
		<h1>Footer Tabs</h1>
		<a href="#" data-rel="back">Back</a>
	</div><!-- /header --> 
 
	<div data-role="content"> 
	
		Icons by Joseph Wain / <a href="http://www.glyphish.com" target="_blank">glyphish.com</a>. Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/us/" target="_blank">Creative Commons Attribution 3.0 United States License</a>.
	
	</div>
	
	<div data-role="footer" data-position="fixed">
		<div data-role="navbar">
			<ul>
				<li><a href="#" id="tabA" data-icon="custom">One</a></li>
				<li><a href="#" id="tabB" data-icon="custom" class="ui-btn-active">Two</a></li>
				<li><a href="#" id="tabC" data-icon="custom">Three</a></li>
			</ul>
		</div><!-- /navbar -->
	</div><!-- /footer -->
		
</div>
  
<div data-role="page" id="popups" data-theme="b">
 
	<div data-role="header" data-position="fixed">
		<h1>Popups</h1>
		<a href="#" data-rel="back">Back</a>
	</div><!-- /header --> 
 
	<div data-role="content"> 
	
		<a href="#popupBasic" data-rel="popup" data-role="button" class="ui-btn-plain">Open Popup</a>

		<a href="#popupOverlay" data-rel="popup" data-role="button" class="ui-btn-plain">Open Popup with Overlay</a>

		<a href="#popupiOS" data-rel="popup" data-role="button" class="ui-btn-plain">iOS Style Popup</a>

		<div data-role="popup" data-transition="fade" id="popupBasic">
			<p>This is a completely basic popup, no options set.<p>
		</div>

		<div data-role="popup" data-transition="fade" data-overlay-theme="a" id="popupOverlay">
			<p>This is a completely basic popup, but with an overlay<p>
		</div>

		<div data-role="popup" data-transition="fade" data-theme="a" data-position-to="window" id="popupiOS">
			<img src="ios_inspired/images/tick.png">
			<p>Saved<p>
		</div>
	
	</div>
		
</div>
 

</body> 
</html> 